<template>
	<view>
		<u-navbar title="商品管理" :border-bottom='false' back-icon-size='48'>
			<view slot='right' style="padding-right: 32rpx;font-size: 28rpx;" @click="navTo('./addGoods')">
				新增商品
			</view>
		</u-navbar>
		<u-tabs :list="tabList" :is-scroll="false" active-color="#333333" bar-height='4' bar-width='64'
			:bar-style='barStyle' :current="current" @change="tabChange" :bold='false'></u-tabs>
		<view class="main">
			<view class="goods-ul">
				<view class="goods-li" v-for="(goods,goodsx) in goodsList" :key='goodsx'>
					<view class="top">
						<view class="type">
							{{goods.goods_category}}
						</view>
						<view class="status">
							{{goods.is_show == 1?'已上架':goods.is_show ==2?'已下架':'其他'}}
						</view>
					</view>
					<view class="mid">
						<image src="../../../static/imgs/del/del.png" mode=""></image>
						<view class="text">
							{{goods.title}}
						</view>
						<view class="num">
							x{{goods.num}}
						</view>
					</view>
					<view class="price">
						¥ {{goods.price}}
					</view>
					<view class="tools-btn">
						<view class="up" v-if="goods.is_show == 2" @click="standFn(goods)">
							上架
						</view>
						<view class="dwon" v-if="goods.is_show == 1" @click="standFn(goods)">
							下架
						</view>
						<view class="del" @click="delGoodsFn(goods.id)">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				type: 0,
				page: 1,
				current: 0,
				barStyle: {
					background: 'linear-gradient(180deg, #6ABCFC 0%, #048FFE 100%)'
				},
				tabList: [{
						name: '全部'
					},
					{
						name: '已上架'
					},
					{
						name: '已下架'
					}
				],
				goodsList: []
			}
		},
		onReachBottom() {
			this.page++
			this.getGoodsList()
		},
		onShow() {
			this.getGoodsList()
		},
		methods: {
			async delGoodsFn(id){
				let res =await myRequest.delGoods({
					id:id
				})
				if(res.status) {
					uni.showToast({
						title:'删除成功'
					})
          setTimeout(()=>{
            this.page = 1
            this.goodsList = []
            this.getGoodsList()
          },1000)

				}
			},
			// 商品上下架
			async standFn(item) {
				let type
				if (item.is_show == 1) {
					type = 2
				}
				if (item.is_show == 2) {
					type = 1
				}
				let res = await myRequest.standGoods({
					is_show: type,
					id: item.id
				})
				if (res.status) {
					uni.showToast({
						title: '操作成功'
					})
				}
			},
			// 获取门店商品
			async getGoodsList() {
				let {
					page,
					type
				} = this
				let res = await myRequest.getShopGoods({
					page: page,
					is_show: type
				})
				if (res.status) {
					this.goodsList = [...this.goodsList, ...res.data]
				}
			},
			
			// 切换
			tabChange(index) {
				this.current = index
				this.page = 1
				this.goodsList = []
				switch (this.current) {
					case 0:
						this.type = 0
						break;
					case 1:
						this.type = 1
						break;
					case 2:
						this.type = 2
						break;
					default:
						break;
				}
				this.getGoodsList()
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 20rpx;

		.goods-ul {
			width: 100%;
			height: auto;

			.goods-li {
				width: 710rpx;
				height: 444rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 20rpx;

				.top {
					width: 100%;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.status {
						font-size: 28rpx;
						font-family: Arial;
						font-weight: 400;
						color: #FF4600;
					}
				}

				.mid {
					display: flex;

					image {
						width: 160rpx;
						height: 160rpx;
					}

					.text {
						width: 64%;
						margin-left: 20rpx;
					}

					.num {
						margin-left: auto;
					}
				}

				.price {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: right;
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
				}

				.tools-btn {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.up,
					.dwon,
					.del {
						width: 144rpx;
						height: 60rpx;
						border-radius: 40rpx;
						border: 2rpx solid rgba(153, 153, 153, 0.4);
						line-height: 60rpx;
						text-align: center;
						color: #666666;
						margin-left: 20rpx;
					}

					.up,
					.del {
						border: 2rpx solid #FF4600;
						color: #FF4600;
					}
				}
			}
		}
	}
</style>
